<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改')"/>
</head>
<input id="id" th:value="${id}" class="layui-hide"  type="text">
<input id="collectionName" th:value="${collectionName}" class="layui-hide"  type="text">

<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-badge">&nbsp;数据库</span>
        <span id="dataBaseName"></span>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-badge">&nbsp;表&emsp;名</span>
        <span id="tableName"></span>
    </div>
</div>

<table class="layui-table">
    <colgroup>
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>字段名</th>
        <th>原值</th>
        <th>新值</th>
    </tr>
    </thead>
    <tbody id="sqlInfoEntityTableBody">

    </tbody>
</table>

<style>
    .textareaCss {
        resize: vertical;
        width:100%;
        min-height: 200px;
    }
</style>

<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    layui.use(['form', 'jquery'], function () {
        var $ = layui.jquery;
        $.ajax({
            type: "get",
            url: '/sqlLog/getById?id=' + $("#id").val() + '&collectionName=' + $("#collectionName").val(),
            dataType: 'json',
            async: true,
            success: function (data) {
                if (data.success !== undefined && data.success) {
                    var resultData = data.data;
                    var sql = resultData.sql;
                    var dataBaseName = resultData.dataBaseName;
                    var tableName = resultData.tableName;
                    var sqlEntities = resultData.sqlEntities;
                    var rowResult = "";
                    for (let i = 0; i < sqlEntities.length; i++) {
                        var sqlEntity = sqlEntities[i];
                        var field = sqlEntity.field;
                        var newValue = sqlEntity.newValue;
                        var oldValue = sqlEntity.oldValue;
                        if (oldValue == null || oldValue === 'null') {
                            oldValue = '';
                            newValue = "<td >" + newValue + "</td>\n";
                        } else {
                            if (oldValue !== newValue) {
                                if (newValue == null || newValue === 'null' || newValue === '') {
                                    newValue =
                                        "<td  style='border: 1px solid red;'>" + newValue + "</td>\n";
                                } else {
                                    newValue =
                                        "<td  style='border: 1px solid red; border-right: 0 solid'><span style='color: red'>" + newValue + "</span></td>\n";
                                }
                            } else {
                                newValue = "<td >" + newValue + "</td>\n";
                            }
                        }

                        var trRow = "<tr>\n" +
                            "      <td>" + field + "</td>\n" +
                            "      <td>" + oldValue + "</td>\n" +
                            newValue +
                            "    </tr>";

                        rowResult = rowResult + trRow;
                    }
                    $("#dataBaseName").html(dataBaseName);
                    $("#tableName").html(tableName);
                    $("#sql").val(sql);
                    $("#sqlInfoEntityTableBody").html(rowResult);
                }
            },
        });
    })
</script>
<script>
</script>
</body>
</html>